<template>
  <div id="footprint">
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          :price="item.goods.retail_price"
          :desc="item.goods.goods_brief"
          :title="item.goods.name"
          :thumb="item.goods.list_pic_url"
          v-for="(item,index) in fpGoods" :key="index"
          @click="onClickGoods(item.goods.id)"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #footprint{
    width: 100%;
    height: 100%;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,Cell,List,Card
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import fpApi from '../api/footprint.api';

Vue.use(VanImage).use(Cell).use(List).use(Card);
@Component
export default class FootPrintComponent extends Vue {
  private fpGoods: any[]=[];
  private fpData: any={};
  private finished: boolean=false;
  private loading: boolean=false;
  private refreshing: boolean=false;
  
  async created(){
    store.commit('global/setShowPageLoading',true);
    this.fpData=await fpApi.getFootPrint({
      join:['goods']
    });
    this.fpGoods=this.fpData.data;
    store.commit('global/setShowPageLoading',false);
  }

  private async onLoad(){
    const p=this.fpData.page+1;
    if(p>this.fpData.pageCount){
      this.finished=true;
      return;
    }
    this.loading=true;
    this.fpData=await fpApi.getFootPrint({
      join:['goods'],
      page: p
    });
    this.fpGoods=this.fpGoods.concat(this.fpData.data);
    this.loading=false;
  }
  
  private onClickGoods(id){
    router.push({
      path:`/goodDetail/${id}`
    })
  }

  private async onRefresh() {
    // 清空列表数据
    this.finished = false;
    this.loading=true;
    this.fpData=await fpApi.getFootPrint({
      join:['goods']
    });
    this.fpGoods=this.fpData.data;
    this.loading=false;
  }
  
}
</script>
